<template>
    <div>
        <header class="header-content">
            <div class="header-icon-back" @click="to('user')"><span></span></div>
            <div class="header-title">小金库</div>
        </header>
        <div class="view-content">
            <div class="vault-cell">
                <div class="vault-cell-title">账户余额</div>
                <div class="vault-cell-content">
                    <div class="vault-cell-content-title">￥ 800.0</div>
                    <div class="vault-cell-content-info">
                        <span>可提现金额：￥300.0</span>
                        <span>返现金额：￥500.0</span>
                    </div>
                </div>
                <div class="vault-cell-foot" @click="to('recharge')">
                    <span>余额充值</span>
                    <img src="../assets/icon/icon-more.png">
                </div>
                <div class="vault-cell-foot" @click="to('withdrawal')">
                    <span>余额提现</span>
                    <img src="../assets/icon/icon-more.png">
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
    @import "../css/style.css";
    .vault-cell {
        background-color: #fff;
        padding: 0 0.9375rem;
        border-bottom: 0.1rem solid #f5f5f5;
    }
    .vault-cell-title {
        padding: 0.625rem 0;
        color: #999;
        font-size: 0.8125rem;
        text-align: left;
        border-bottom: 0.02rem solid #f5f5f5;
    }
    .vault-cell-content {
        padding: 0 0.9375rem;
        border-bottom: 0.02rem solid #f5f5f5;
    }
    .vault-cell-content-title {
        color: red;
        font-size: 1.06rem;
        padding: 0.625rem 0;
    }
    .vault-cell-content-info {
        display: flex;
        justify-content: space-between;
    }
    .vault-cell-content-info span {
        font-size: 0.81rem;
        color: #cecece;
        padding: 0.625rem 0;
    }
    .vault-cell-foot {
        color: #586c94;
        font-size: 0.88rem;
        padding: 0.625rem 0;
        border-bottom: 0.1rem solid #f5f5f5;
        display: flex;
        justify-content: space-between;
    }
    .vault-cell-foot img {
        width: 1.5rem;
        height: 1.5rem;
    }
</style>
<script>
    export default {
        methods: {
            to(page) {
                this.$router.push({
                    name: page
                })
            }
        }
    }
</script>

